<template>
  <view>
    <!-- index -->
    <!-- 顶部占位 -->
    <!-- #ifdef APP-PLUS -->
    <!-- <view-navbar></view-navbar> -->
    <!-- #endif -->
    <!-- 搜索 -->
    <view class="h44 margin">
      <view class="flex-between" style="padding-top: 10rpx;padding-bottom: 16rpx;">
        <view class="" style="width: 608rpx;">
          <u-search :showAction="false" disabled @click="$pub.go('/pages_home/search/search')" placeholder="搜索医生、商品、医院"
            v-model="keyword" :clearabled="true" searchIconColor="#7976E9" borderColor="#DDDDDD"
            bgColor="#ffffff"></u-search>
        </view>
        <view class="flex-cen">
          <image @click="$pub.go('/pages_shop/shop/shopcart/shopcart')" mode="widthFix"
            src="/static/img/goodslist/02-gowuce.svg" alt="" style="width: 42rpx;height: 42rpx;" />
        </view>
      </view>
    </view>
    <!-- 医疗器械 -->
    <view class="list margin flex-wrap" style="">
      <view class="item flex4" v-for="(item, index) in list2" :key="index"
        @click="$pub.go(`/pages_shop/shop/shopcate/shopcate?type=${encodeURIComponent(JSON.stringify(index))}`)">
        <view class=" flex-cc" style="padding: 16rpx 38rpx 18rpx 38rpx;">
          <image :src="item.url" alt="" style="height: 60rpx;height: 60rpx;" mode="heightFix" />
        </view>
        <view class="size_14">
          {{ item.name }}
        </view>
      </view>
    </view>
    <!-- 惠明礼包 -->
    <view class="margin" v-if="false">
      <image src="http://storage.dezhoucloud.com/img/goods/banner2.svg" alt="" style="" mode="widthFix" />
    </view>
    <!-- 防疫物资 -->
    <view class="margin">
      <view style="display: flex;justify-items: center;align-items: center;padding-top: 30rpx;padding-bottom: 40rpx;">
        <view class="left-line ml10 mr10"></view>
        <h4 class="size_17">防疫物资</h4>
      </view>
      <!-- @click="$pub.go('/pages/goodsDetail/goodsDetail')" -->
      <view class="flex-between">
        <view class="item2 ms17">
          <image src="http://storage.dezhoucloud.com/img/goods/goods.png" alt="" mode="widthFix" />
          <h5 class="size_14">海氏海诺成人医用口罩...</h5>
          <text class="size_12 color_84">10片/盒</text>
          <view class="flex">
            <u-text mode="price" text="49.00" color="#F8662D"></u-text>
            <img src="/static/img/goodslist/03-orangegowuce.svg" alt="">
          </view>
        </view>
        <view class="item2  ms17">
          <image src="http://storage.dezhoucloud.com/img/goods/goods.png" alt="" mode="widthFix" />
          <h5 class="size_14">海氏海诺成人医用口罩...</h5>
          <text class="size_12 color_84">10片/盒</text>
          <view class="flex">
            <u-text mode="price" text="49.00" color="#F8662D"></u-text>
            <img src="/static/img/goodslist/03-orangegowuce.svg" alt="">
          </view>
        </view>
      </view>
    </view>
    <!-- line -->
    <view class="line">
    </view>
    <!-- hot -->
    <view class="margin">
      <!-- hot分类 -->
      <u-tabs :list="list1" keyName="subtotalName" @click="click" lineWidth="126rpx" lineColor="#7976E9" :activeStyle="{
        color: '#7976E9',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }" :inactiveStyle="{
  color: '#848484',
  transform: 'scale(1)'
}" itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;"></u-tabs>
      <!-- hotData -->
      <view class="flex-wrap" v-if="list1Data.length">
        <view class="item3 p-10" style="width: 50%;" v-for="v, i in list1Data" :key="i"
          @click="$pub.go(`/pages_shop/goodsDetail/goodsDetail?data=${v.uproductid}`)">
          <!-- <image :src="v.uproductPic ||'/static/img/goodslist/goods.png' " alt="" mode="widthFix"> -->
          <image src="http://storage.dezhoucloud.com/img/goods/goods.png" alt="" mode="widthFix" />
          <h5 class="size_14">{{ v.uproductName || '海氏海诺成人医用口罩' }}</h5>
          <text class="size_12 color_84">
            {{ v.uproductSpecs || '10片/盒' }}
          </text>
          <view class="flex">
            <u-text mode="price" :text="v.uretailPrice || '50.00'" color="#F8662D"></u-text>
            <img src="/static/img/goodslist/03-orangegowuce.svg" alt="">
          </view>
        </view>
        <!-- <u-loadmore :status="status" /> -->
      </view>
      <u-empty mode="data" v-else></u-empty>
      <!--  -->
    </view>
    <!-- tabs item -->

  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: "",
      /* 第一个分类额外添加其他数据 */
      list2: [],
      /* 第一个分类图片数据 */
      list3: [
        {
          name: "医疗器械",
          url: "/static/img/goodslist/01-wenduji.png",
          productTypeId: "1",
        },
        {
          name: "慢病用药",
          url: "/static/img/goodslist/04-man.png",
          productTypeId: "2",
        },
        {
          name: "药食同源",
          url: "/static/img/goodslist/05-food.png",
          productTypeId: "3",
        },
        {
          name: "感冒咽炎",
          url: "/static/img/goodslist/06-man2.png",
          productTypeId: "3",
        },
        {
          name: "特医食品",
          url: "/static/img/goodslist/07-bigwan.png",
          productTypeId: "4",
        },
        {
          name: "生活用品",
          url: "/static/img/goodslist/08-life.png",
          productTypeId: "5",
        },
        {
          name: "婴儿药品",
          url: "/static/img/goodslist/09-son.png",
          productTypeId: "6",
        },
        {
          name: "其他",
          url: "/static/img/goodslist/10-other.png",
          productTypeId: "7",
        },
      ],
      /* 热门分类 */
      list1: [
        {
          name: "慢病用药",
        },
        {
          name: "妇科保健",
        },
        {
          name: "风湿关节",
        },
        {
          name: "家中常备",
        },
      ],
      /* 热门 */
      list1Data: [],
      /* 热门分类搜素 */
      form: {
        pageSize: 1,
        pageNum: 1,
        subtotalId: null,
      },
      /* 默认分类 */
      cateId: null,
      /* 加载更多 */
      status: "nomore",
    };
  },
  onShow() {
    this.hotProduct();
    this.hotProductCate();
  },
  methods: {
    setImg() { },
    /* hotCate */
    async hotProductCate() {
      let re = await this.$API.productApi.hotProductCate();
      this.list1 = re;
      /* 默认 */
      this.cateId = this.list1[0].subtotalId;
    },
    /* hotData */
    async hotProduct() {
      let re = await this.$API.productApi.hotProduct(this.form);
      this.list1Data = re;
    },
    /* 分类切换 */
    click(item) {
      console.log("item", item);
      let id = item.subtotalId;
      /* 分类数据 */
      this.form.subtotalId = id;
      this.hotProduct();
    },
    /* 第一个分类 */
    async getListKind() {
      let re = await this.$API.productApi.getListType();
      re = re.map((i) => {
        this.list3.map((d) => {
          if (d.productTypeId == i.productTypeId) i.url = d.url;
        });
        return i;
      });
      /* 补充数据 */
      re.push({
        name: "其他",
        url: "/static/img/goodslist/10-other.png",
        productTypeId: "7",
      });
      this.list2 = re;
    },
  },
  onLoad() { },
  onShow() {
    this.getListKind();
    this.hotProductCate();
    /* 默认 */
    this.form.subtotalId = this.cateId;
    this.hotProduct();
  },
  /* 更多商品 */
  onReachBottom() {
    this.status = "loading";
    setTimeout(() => {
      this.status = "nomore";
      this.form.pageNum++;
      this.hotProduct();
    }, 500);
  },
};
</script>

<style lang="scss">
	/* #ifdef MP */
	::v-deep .u-search__content__input{
		font-size: 28rpx !important;
	}
	/* #endif */
.item {
  text-align: center;
}

.item3 {
  padding-top: 34rpx;
  /* padding-bottom: 50rpx; */
}

.flex-cc {
  display: flex;
  justify-content: center;
}
</style>